<template>
  <view class="price-show" v-if="!!price">
    <view class="price-prefix">{{priceObj.prefix}}</view>
    <view class="price-integer"> {{priceObj.integer}}</view>
    <view class="price-point">.</view>
    <view class="price-decimal">{{priceObj.decimal}}</view>
  </view>
  <view class="price-show" v-else>
    暂无价格
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const props = defineProps({
  price: String,
});

const priceObj = ref({
  prefix: '¥',
  integer: '0',
  decimal: '00',
})
if(!!props.price) {
  const s = props.price?.split('');
  let prefixPrice ='';
  let bodyPrice ='';
  let suffixBody ='';
  let decimalPoint = false;
  for (let i = 0, len = s.length; i < len; i++) {
    const c = s[i];
    if(c === '.') {
      decimalPoint = true;
      continue;
    }
    if(decimalPoint){
      suffixBody = suffixBody.concat(c)
    }else {
      if (isNaN(c)) {
        prefixPrice = prefixPrice.concat(c)
      } else {
        bodyPrice = bodyPrice.concat(c);
      }
    }
  }
  if(prefixPrice.length == 0){
    prefixPrice = priceObj.value.prefix;
  }
  if(suffixBody.length == 0){
    suffixBody = priceObj.value.decimal;
  }
  priceObj.value = {
    prefix: prefixPrice,
    integer: bodyPrice,
    decimal: suffixBody,
  }
}
</script>
<style lang="scss" scoped>
.price-show{
  height: 100%;
  display: flex;
  font-size: 24rpx;
  color: #F81A1A;
  line-height: 42rpx;
  font-weight: 0;
  letter-spacing: -0rpx;
  font-family: fantasy;
  .price-prefix{
    min-width: 15rpx;
  }
  .price-integer{
    font-size: 32rpx;
  }
  .price-point{
    width: 6rpx;
  }
  .price-decimal{

  }
}
</style>